<script setup lang="ts">
import { onMounted } from 'vue';
import { navigateTo, showLoading } from '@tarojs/taro';
import { Scan as NutIconScan } from '@nutui/icons-vue-taro';
import { GOV_CAR_CODE_LIST } from '/@/api/modules/flow-path/flow-path-gov-car';
import { formatTimestampStr } from '/@/utils/time';
import { state } from './state';

/**
 * @description 消息列表查询
 * @param {Number} page -当前页
 * @param {Number} pageSize -每页条数
 */
function queryList(page: number = 1, pageSize: number = 15) {
  if (!page && state.finished) return;
  state.loading = true;
  showLoading();
  GOV_CAR_CODE_LIST({
    comQuery: { page, pageSize },
  })
    .then((res) => {
      state.loading = false;

      if (
        state.activePage >=
        (res.comQuery?.pageCount ||
          (res.comQuery?.totalCount as number) / (res.comQuery?.pageSize as number) ||
          1)
      )
        state.finished = true;
      if (!res.list || !res.list.length) return;
      state.list.push(...res.list);
      state.activePage += 1;
    })
    .catch(() => {
      state.loading = false;
    });
}

/**
 * @function 加载
 */
function onLoading() {
  if (state.finished) return;

  queryList(state.activePage);
}

onMounted(() => {
  state.activePage = 1;
  state.loading = true;
  state.finished = false;
  state.list = [];
  onLoading();
});
</script>

<template>
  <scroll-view
    class="qr-list app-page__wrapper"
    :scroll-y="true"
    :lower-threshold="100"
    @scrolltolower="onLoading()"
  >
    <view class="qr-list__wrapper">
      <view
        class="qr-list-item"
        v-for="item in state.list"
        :key="item.plateNo"
        @click="
          navigateTo({
            url: `/pages/car-apply/detail/index?plateNo=${item.plateNo}&startUseTime=${item.startUseTime}&endUseTime=${item.endUseTime}&qrCode=${item.qrCode}`,
          })
        "
      >
        <view class="qr-list-item__left">
          <view class="qr-list-item__left--top"> {{ item.plateNo }}</view>
          <view>
            <text
              >{{ formatTimestampStr(item.startUseTime, 'YYYY-MM-DD HH:mm') }}至{{
                formatTimestampStr(item.endUseTime, 'YYYY-MM-DD HH:mm')
              }}</text
            >
          </view>
        </view>
        <view class="qr-list-item__right">
          <nut-icon-scan />
        </view>
      </view>

      <view class="app-page__list-tips">
        <text v-if="!state.list.length">暂无数据！</text>
        <text v-else-if="state.list.length && state.loading">加载中...</text>
        <text v-else-if="state.list.length && state.finished">加载完成!</text>
      </view>
    </view>
  </scroll-view>
</template>

<style lang="scss">
.qr-list {
  &__wrapper {
    padding: 20px;
  }

  &__tip {
    color: #999;
    font-size: 28px;
    text-align: center;
    margin-bottom: 20px;
  }

  .qr-list-item {
    background-color: #fff;
    border-radius: 16px;
    margin-bottom: 20px;
    padding: 15px 20px;
    overflow: hidden;
    display: flex;
    align-items: center;
    &:last-child {
      margin-bottom: 20px;
    }

    &__left {
      color: #999;
      font-size: 28px;
      flex-direction: row;
      flex: 1;
      &--top {
        font-size: 32px;
        font-weight: bold;
        color: #333;
        margin-bottom: 5px;
      }
    }

    &__right {
      display: flex;
      align-items: center;
    }
  }
}
</style>
